<!--
 * @Author: thinkido 4077725@qq.com
 * @Date: 2022-07-07 18:59:50
 * @LastEditors: thinkido 4077725@qq.com
 * @LastEditTime: 2022-07-11 18:53:40
 * @FilePath: \vue3vite-framework\src\views\Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
// import HelloWorld from '../components/HelloWorld.vue'
import dayjs from "dayjs";
let day = dayjs().format('YYYY-MM-DD hh:mm');
import { computed, ref } from 'vue'
import { useStore } from "vuex";

const active = ref(0);
const store = useStore();

const name = computed(() => store.state.example.name);

console.log('index setup store.state.name',store.state.name , store.state.example.name)

</script>
<script>
// import eventBus from '@/utils/eventBus'
import eventBus from 'vue3-eventbus'
import { QBtn ,QIcon } from "quasar";

export default {
  name:'Index',
  components:['QBtn', 'QIcon'],
  methods: {
    
  },
  async created() {
    // let data = await this.$axios.get('api/testMock').then(r=>r.data); 
    let data = await this.$axios.post('/api/createUser').then(r=>r.data); 
    
    
    console.log('index created:' , this.$api , data , {name:this.name} )
  }, 
  async mounted() {
    
    this.$eventBus.on('testEvt',data=>{
      console.log('index mounted eventBus on:' ,data )
    })
    console.log('index mounted')
    setTimeout(()=>{
      console.log('index mounted setTimeout: emit eventBus testEvt'  )
      eventBus.emit('testEvt',123);
    },2)
    console.log('index mounted:' , await this.$api.testApi(20) , this.name )
  },
}
</script>

<template>
    
  
  <div class="c-page page_index q-pa-md">
      <img alt="Vue logo" src="@/assets/logo.png" />
      <div id='test'>page index {{day}}</div>

      <div class="test"> rem</div>
      <div>
        <q-icon name="ion-add-circle-outline" />
        <!-- <q-btn color="primary"  label="Show another notification"    /> -->
      </div>
      <van-row>
        <van-col span="8">span: 8</van-col>
        <van-col span="8">span: 8</van-col>
        <van-col span="8">span: 8</van-col>
      </van-row>
      
      <van-row>
        <van-col span="4">span: 4</van-col>
        <van-col span="10" offset="4">offset: 4, span: 10</van-col>
      </van-row>
      <div class="test"> rem2</div>
      <div class="test"> rem3</div>
      <p>aaa</p>
    </div>
</template>


<style>
.page_index{    
    text-align: center;
    color: #2c3e50;
}
.test{
  width: 200px;
  height: 200px;
  background-color: #502c41;
  font-size: 13px;
}
</style>
